<template>
  <div>
    <el-card class="menus_main">
      <!-- 顶部区域 -->
      <HeadAdd :addText="'新建'" :addTitle="'菜单'" @addClick="addEditClick">
      </HeadAdd>
      <!-- 表格区域 -->
      <el-table
        :data="menusList"
        default-expand-all
        row-key="id"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column prop="title" label="标题" width="200">
          <template v-slot="{ row }">
            <span class="iconfont icon-points" v-if="row.is_point"></span>
            <span class="iconfont icon-files" v-else-if="row.childs"></span>
            <span class="iconfont icon-document" v-else></span>
            <span>&nbsp;{{ row.title }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="code" label="权限点代码" />
        <el-table-column label="操作" width="150" align="center">
          <template v-slot="{ row }">
            <el-button
              type="primary"
              icon="el-icon-edit"
              plain
              circle
              @click="addEditClick('编辑', row.id)"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              plain
              circle
              @click="delMenus(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 对话框 -->
    <el-dialog
      :title="`${text}菜单`"
      :visible.sync="showDialog"
      @close="bthCancel"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        style="width: 400px; margin: 0 auto"
      >
        <el-form-item label="权限组名称">
          <el-radio-group v-model="isPoint" @change="isPointChange">
            <el-radio :disabled="disabled" label="menu">菜单</el-radio>
            <el-radio :disabled="disabled" label="point">权限点</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="权限组名称">
          <el-select v-model="value" @change="selectedChange">
            <el-option :value="0" label="主导航" />
            <el-option
              v-for="item in treeData"
              :key="item.id"
              :label="item.title"
              :value="item.id"
              :class="{
                textIndex1: item.type === 10,
                textIndex2: item.type === 1
              }"
              :disabled="item.disabled"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限代码" prop="code">
          <el-input v-model="ruleForm.code"></el-input>
        </el-form-item>
        <el-form-item label="权限标题" prop="title">
          <el-input v-model="ruleForm.title"></el-input>
        </el-form-item>
      </el-form>
      <div
        slot="footer"
        style="width: 400px; margin: 0 auto; text-align: center"
      >
        <el-button @click="bthCancel">取消</el-button>
        <el-button type="primary" @click="btnOk">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 封装函数
import { required } from '@/module-manage/utils/index.js'
// 调用组件
import HeadAdd from '@/module-manage/components/head-add'
// 请求接口
import { list, remove, add, detail, update } from '@/api/base/menus.js'
export default {
  components: { HeadAdd },
  data () {
    return {
      menusList: [],
      treeData: [],
      value: 0,
      text: '',
      showDialog: false,
      isPoint: 'menu',
      ruleForm: {
        code: '',
        id: '',
        is_point: false,
        pid: 0,
        title: ''
      },
      rules: {
        code: [required('权限代码')],
        title: [required('权限标题')]
      },
      count: 1,
      disabled: false
    }
  },
  created () {
    this.getMenusList()
  },
  methods: {
    // 处理拿到的菜单数据
    setTableDate (li) {
      li.forEach((item) => {
        if (item.points !== undefined) {
          item.children = item.points
          this.setTableDate(item.children)
        } else if (item.childs !== undefined) {
          item.children = item.childs
          this.setTableDate(item.children)
        }
      })
    },
    // 获取菜单列表
    async getMenusList () {
      const { data } = await list()
      this.setTableDate(data)
      this.menusList = data
    },
    // 点击删除菜单
    delMenus (id) {
      this.$confirm('此操作将永久删除菜单 , 是否继续?')
        .then(async () => {
          await remove({ id: id })
          this.$message.success('删除菜单成功')
          this.getMenusList()
        })
        .catch(() => {
          this.$message.info('已取消删除')
        })
    },
    setSelectData (list) {
      list.forEach((item, index, arr) => {
        if (item.childs) {
          if (item.type === 10) {
            this.treeData.push(item)
          } else {
            this.treeData.push({ ...item, type: this.count })
          }
          if (
            item.childs.some((obj, index, arr) => {
              return obj.is_point
            })
          ) {
            return
          } else {
            this.setSelectData(item.childs)
            this.count++
          }
          if (index === arr.length - 1) {
            this.count--
          }
        } else if (item.points) {
          if (item.type === 10) {
            this.treeData.push(item)
          } else {
            this.treeData.push({ ...item, type: this.count })
          }
          if (
            item.points.some((obj, index, arr) => {
              return obj.is_point
            })
          ) {
            return
          } else {
            this.setSelectData(item.points)
            this.count++
          }
          if (index === arr.length - 1) {
            this.count--
          }
        } else {
          if (item.type === 10) {
            this.treeData.push(item)
          } else {
            this.treeData.push({ ...item, type: this.count })
          }
          if (index === arr.length - 1) {
            this.count--
          }
        }
      })
    },
    // 点击弹出对话框
    async addEditClick (text, id) {
      this.text = text
      const { data } = await list()
      const res = data.map((item) => {
        return { ...item, type: 10 }
      })
      this.setSelectData(res)
      if (id) {
        const res1 = await detail({ id: id })
        this.ruleForm = res1.data
        if (res1.data.pid === null) {
          this.value = 0
        } else {
          this.value = res1.data.pid
        }
        if (res1.data.is_point) {
          this.isPoint = 'point'
          this.treeData = this.treeData.map((item) => {
            if (item.childs) {
              return { ...item, disabled: true }
            } else {
              return item
            }
          })
        }
        this.disabled = true
      }
      this.showDialog = true
    },
    // 单选框发生变化时触发
    isPointChange (value) {
      if (value === 'point') {
        this.ruleForm.is_point = true
        this.treeData = this.treeData.map((item) => {
          if (item.childs) {
            return { ...item, disabled: true }
          } else {
            return item
          }
        })
      } else {
        this.ruleForm.is_point = false
        // this.disabled = false
      }
    },
    async btnOk () {
      await this.$refs.ruleForm.validate()
      if (this.ruleForm.id !== '') {
        await update(this.ruleForm)
        this.$message.success('更新菜单成功')
      } else {
        await add({
          code: this.ruleForm.code,
          id: '',
          is_point: false,
          pid: this.ruleForm.pid,
          title: this.ruleForm.title
        })
        this.$message.success('新建菜单成功')
      }
      this.bthCancel()
      this.getMenusList()
    },
    // 选中的值发生变化时的事件
    selectedChange (value) {
      if (value === 0) {
        this.ruleForm.pid = value
      } else {
        const res = this.treeData.filter((item) => {
          return item.id === value
        })
        this.ruleForm.pid = res[0].id
      }
    },
    bthCancel () {
      this.showDialog = false
      this.treeData = []
      this.$refs.ruleForm.resetFields()
      this.isPoint = 'menu'
      this.disabled = false
      this.count = 1
      this.ruleForm = {
        code: '',
        id: '',
        is_point: false,
        pid: 0,
        title: ''
      }
    }
  }
}
</script>

<style scoped lang="less">
.menus_main {
  margin: 20px;
  /deep/ .el-table__expand-icon {
    visibility: hidden;
  }
}
.textIndex1 {
  text-indent: 10px;
}
.textIndex2 {
  text-indent: 20px;
}
</style>
